:root {
    --color-white: #FFFFFFFF;
    --color-black: #000000E6;
    --color-primary: #002754FF;
    --color-background: #f8f8f8FF;
    --color-background-dark: #001b3bFF;


    --nav-color: var(--color-primary);
    --nav-color-text: var(--color-white);
    --nav-tabs-color: var(--color-white);
    --nav-tabs-text-color: #606266;
    --nav-tabs-active-color :#F5F7FA;
    --nav-tabs-active-text-color : #303133;
    --menu-color: var(--color-white);
    --menu-hover-color: #e8f7f6;
    --menu-color-text: var(--color-black);
    --page-background: var(--color-background);

    --box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05)
}

html[theme-mode="light"] {
    --nav-color: var(--color-white);
    --nav-color-text: var(--color-black);
    --menu-color-text: var(--color-black);
    --border-color: #0000000F;
}

html[theme-mode="dark-menu"] {
    --nav-color-text: var(--color-white);
    --menu-color: var(--color-primary);
    --menu-color-text: var(--color-white);
    --menu-hover-color: #0265DCFF;
    --box-shadow: 0 1px 2px 0 rgba(255,255,255,.05)
}

html[theme-mode="dark"] {
    /*--nav-color-text: var(--color-white);*/
    /*--nav-tabs-color: var(--color-primary);*/
    /*--nav-tabs-text-color: #FFFFFFC9;*/
    /*--nav-tabs-active-color : #0f345eFF;*/
    /*--nav-tabs-active-text-color : var(--color-white);*/
    /*--nav-tabs-active-line-color : #0265DCFF;*/
    /*--menu-color: var(--color-primary);*/
    /*--menu-color-text: var(--color-white);*/
    /*--menu-hover-color: #0265DCFF;*/
    /*--page-background: var(--color-background-dark);*/
    /*--box-shadow: 0 1px 2px 0 rgba(255,255,255,.05)*/


    --nav-color: var(--color-white);
    --nav-color-text: var(--color-black);
    filter: invert(88%);
}
html[theme-mode="dark"] img {
    filter: invert(100%);
}

html[theme-mode="dark"] .htmlGadget {
    filter: invert(100%);
}
html[theme-mode="dark"] .htmlGadget img {
    filter: invert(0);
}
html[theme-mode="dark"] .dashboard-page[theme] {
    filter: invert(100%);
}
html[theme-mode="dark"] .dashboard-page[theme] .htmlGadget{
    filter: invert(0);
}

html[theme-mode="dark"] .b-card-top .b-card-top__top-favorites {
  filter: invert(80%);
}
